<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
	$(function(){
		shuaxin2();
		$('#dialog2').dialog({
			autoOpen:false,
			modal:true,
			width:320,
			buttons:{
				'保存':function(){
					var form=$(this).find('form');
					var formDom = form[0];
					var name = formDom.name.value;
					var classHour=formDom.classHour.value;
					if(name.length==0){
						alert("请输入课程名！");
						return;
					}
					if(classHour.length==0){
						alert("请输入课时数！")
						return;
					}
					var params=form.serialize();
					$.post('course?method=ajaxSave',params,function(data){
						shuaxin2();
					});
					$(this).dialog('close');
				},
				
				'退出':function(){
					$(this).dialog('close');
				},
				
			}
		})
		
	})
	
	function shuaxin2() {
		$.post('course',{method:"allCourse"},function(data){
			var tbody = $('#tbody');
			tbody.empty();
			for(var i=0;data.length;i++){
				var kc=data[i];
				var tr=$('<tr/>');
				tr.append($('<td/>').html(kc.id));
				tr.append($('<td/>').html(kc.name));
				tr.append($('<td/>').html(kc.classHour));
				tr.append($('<td/>').html($('<button/>').attr({type:"button",onclick:"xg("+kc.id+")"}).html("修改")));
				tr.append($('<td/>').html($('<button/>').attr({type:"button",onclick:"del("+kc.id+")"}).html("删除")));
				tbody.append(tr);
			}
		});
	}
	
	function xg(id) {
		var dialog=$('#dialog2');
		dialog.load('course',{method:'ajaxEdit',kcId:id},function(){
			dialog.dialog('open');
		})
	}
	
	function del(id) {
		if(confirm("是否删除这条记录！")){
			window.location="course?method=delete&id="+id;
		}
	}

	function ajaxAdd(){
		var dialog = $('#dialog2');
		dialog.load('course',{method:'ajaxEdit',kcId:0},function(){
			dialog.dialog('open');
		});
	}
	
	function fh(){
		window.location="course?method=fh";
	}

	

</script>
<style type="text/css">

	body{
		width:auto;
		height: auto;
		background-repeat:no-repeat;
		background-size: 100%;
	}
	
	.d{
		width: 1400px;
		margin: 20px auto;
	}
	
	td,th{
		
		padding: 7px 7px;
	
	}
	
	table{
			width:100%;
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
    table td, table th{
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
            min-width: 200px;
        }
    table thead th{
            background-color: #CCE8EB;
            width: 100px;
        }
    table tr:nth-child(odd){
            background: #fff;
   	 }
    
    table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
	
	td button{
		padding: 5px 10px;
	}
	
	.button1 {
		padding: 5px 10px;
		margin-bottom: 5px
	}
	
	.button2 {
		margin-top:5px;
		float:right;
		padding: 5px 10px;
		margin-bottom: 5px
	}
	
	h3{
		text-align: center;
	}
	
	form p label{
		display: inline-block;
		width:80px;
		text-align: right;
		margin-right: 8px;
	}
	form p input{
		padding: 5px;
	}
</style>
<title>课程管理</title>
</head>
<body>
	<div class="d">
		<div id="dialog2" title="编辑"></div>
		<h3>课程管理</h3>
		<button class="button1" type="button" onclick="ajaxAdd()">新增</button>
		<table border="1">
			<thead>
				<tr>
					<th>序号</th>
					<th>课程</th>
					<th>课时数</th>
					<th colspan="2">操作</th>
				</tr>
			</thead>
			<tbody id="tbody">
			
			</tbody>
		</table>
	</div>
</body>
</html>